import 'package:flutter/material.dart';
import 'package:flutterlib/common/constants/constants.dart';
import 'package:flutterlib/common/datacenter/user_center.dart';
import 'package:flutterlib/common/style/quhui_style.dart';
import 'package:flutterlib/common/utils/navigator_utils.dart';
import 'package:flutterlib/common/utils/utils.dart';
import 'package:flutterlib/pages/interest/list/interest_normal_list_widget_page.dart';
import 'package:flutterlib/pages/interest/viewmodel/interest_store.dart';
import 'package:flutterlib/widgets/intro/flutter_intro.dart';
import 'package:flutterlib/widgets/quhui_tabbar_widget.dart';
import 'package:flutterlib/widgets/round_underline_tabindicator.dart';

//用于加载内部继承上下拉的页面state的外部容器页面，
//适用于带tabbar，内部是list的页面的改造
class Page extends StatefulWidget {
  Page({Key key}) : super(key: key);

  @override
  PageState createState() => PageState();
}

class PageState extends State<Page> with SingleTickerProviderStateMixin {
  final InterestStore interestStore = InterestStore();
  final SettingsStore store =
      Provider.of<SettingsStore>(currentContext, listen: false);
  List<Widget> tabPageView = new List();
  List<Widget> tabViews = new List();

  Intro intro = Intro(
    /// 总共的引导页数量，必传
    stepCount: 1,

    /// 高亮区域与 widget 的内边距
    padding: EdgeInsets.all(8),

    /// 高亮区域的圆角半径
    borderRadius: BorderRadius.all(Radius.circular(4)),

    /// 使用库默认提供的 useDefaultTheme 可以快速构建引导页
    /// 需要自定义引导页样式和内容，需要自己实现 widgetBuilder 方法
    widgetBuilder: StepWidgetBuilder.useDefaultTheme(
      /// 提示文本
      texts: [
        '这里可以进入消息模块，可以和招募来的趣友进行聊天吐槽',
      ],
      buttonTextBuilder: (int currentStepIndex, int stepCount){
        return "知道了";

      },
    ),
  );

  @override
  void initState() {
    super.initState();

    tabPageView.add(new Observer(builder: (_) {
      var interests = store.interests;
      ValueKey key = ValueKey(interests.length);
      return new InterestNormalListWidgetPage(
        key: key,
        type: 0,
        interests: interests,
      );
    }));
    tabViews.add(renderItem("我的", 0));
    tabPageView.add(new InterestNormalListWidgetPage(
      type: 1,
    ));
    tabViews.add(renderItem("全部", 0));
  }

  renderItem(String item, int i) {
    return VgTab(
      child: new Text(
        item,
        style: QuhuiConstant.smallSubText,
        maxLines: 1,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    print(context.widget.toStringShort());

    ///绘制顶部 tab 控件
    return new QuhuiTabBarWidget(
      key: ValueKey(context.widget.toStringShort()),
      type: TabType.top,
      tabBarType: 1,
      tabItems: tabViews,
      resizeToAvoidBottomPadding: false,
      tabViews: tabPageView,
      indicatorColor: QuhuiColors.mainThemeColor,
      title: Text('兴趣', style: QuhuiConstant.normalTextBold),
      actions: <Widget>[
        Material(
          color: Colors.transparent,
          child: InkWell(
            key: intro.keys[0],
            onTap: () {
              if (isLogin) {
                NavigatorUtils.gotoMyCircle(context);
              } else {
                NavigatorUtils.goLogin(context);
              }
            },
            child: Row(
              children: <Widget>[
                Text(
                  "我的趣友",
                  style: QuhuiConstant.smallTextBold,
                ),
                Icon(
                  Icons.arrow_forward_ios,
                  color: Colors.black,
                )
              ],
            ),
          ),
        ),
      ],
      onPageChanged: (index) {},
    );
    // return Observer(
    //   builder: (_) {
    //
    //   },
    // );
  }
}
